

<main id="Index">

	<div class="container">
		<div class="search">
			<div class="back" on:click={back}>
				<Icon data={angleLeft} scale="2"/>			
			</div>
			<input class="searchInput" 
			on:focus={()=>{
				showOptionals=true;
				searchConfig={};
				setSearchDOMTop();
			}}
			bind:value={userSearch} placeholder="搜索图片" type="text">
		</div>
		{#if showOptionals}
		<div style="top:{searchDOM_bottom}px" class="optionals" in:slide="{{duration: 1500}}" on:click|self={()=>{showOptionals=false}}>
			<div class="optionals_content">
				<div class="optional">
					<div class="optional_name">尺寸</div>
					<Radio list={size} bind:this={radioComponent[0]} on:unselect={(info)=>{unselectOpt(info,"size")}} on:select={(info)=>{selectOpt(info,"size")}}></Radio>
				</div>
				<div class="optional">
					<div class="optional_name">颜色</div>
					<Radio list={colors} bind:this={radioComponent[1]} on:unselect={(info)=>{unselectOpt(info,"color")}}  on:select={(info)=>{selectOpt(info,"color")}}></Radio>
				</div>
				<div class="optional">
					<div class="optional_name">构图</div>
					<Radio list={orientations} bind:this={radioComponent[2]} on:unselect={(info)=>{unselectOpt(info,"orientation")}}  on:select={(info)=>{selectOpt(info,"orientation")}}></Radio>
				</div>
				<div class="optional">
					<div class="optional_name">搜索语言</div>
					<Radio list={locale} bind:this={radioComponent[3]} on:unselect={(info)=>{unselectOpt(info,"locale")}}  on:select={(info)=>{selectOpt(info,"locale")}}></Radio>
				</div>
				<div class="search_btn {userSearch.trim()==''?'noCanSearch':'Search'}" on:click={userInput}>
					<Icon data={search} scale="1"/>		
					{#if userSearch.trim()==''}
						<p class="noCanSearchText">搜索内容不可以为空</p>	
					{/if}
				</div>
			</div>
		</div>
		{/if}
		<div style="height: 5.5rem;"></div>
		<div class="content grid {isLoad?'load':'noload'} {showPreview?'disScroll':''}">
			{#if getDataType=="search"}
				<div class="curated" on:click={selectCurated}>
					<div class="curated_card">
					<SwimmingBG bg="radial-gradient(circle at 100% 100%, transparent 45%, #29fa67 55%, #3b3bff9e 85%, transparent 65%)">
						<div class="curated_card_text">
							精选<br>图片
						</div>
					</SwimmingBG>
					</div>
				</div>
			{/if}
			{#if getDataType=="curated"}
				<div class="curated" on:click={()=>{
					push("/collections/")
				}}>
					<div class="curated_card">
						<SwimmingBG bg="radial-gradient(circle at 90% 100%, transparent 45%, rgb(80 41 250) 55%, rgb(223 22 160 / 62%) 85%, transparent 65%)">
							<div class="curated_card_text">
								热门<br>收藏
							</div>
						</SwimmingBG>
					</div>
				</div>
			{/if}

			<List list={showList} isNoData={isNoData} on:imgLoading={imgLoading} on:imgLoadComplete={imgLoadComplete} on:select={previewImg}></List>
			
		
			{#if isLoad==false&&isNoData=="someData"}
				<Paging activeIndex={activeIndex} on:onPaging={paging}></Paging>
			{/if}
		</div>
		

		{#if isLoad}
			<Progress progress={progress}></Progress>
		{/if}

		<Previews bind:this={PreviewsComponent} list={showList} showPreviewIndex={showPreviewIndex}
		on:status={(info)=>{
			showPreview=info.detail;
		}}></Previews>
	</div>
</main>

<script>
	import Icon from 'svelte-awesome';
	import {push, pop, replace} from 'svelte-spa-router'
	import { elasticOut,expoIn } from 'svelte/easing';
	import { fade,slide } from 'svelte/transition';
  	import {angleLeft,search} from 'svelte-awesome/icons';
    import {getDataCurated,getDataSearch} from "../../units/http";
	import Radio from "../../component/Radio.svelte"
	import List from "../../component/List.svelte"
	import Previews from "../../component/Previews.svelte"
	import Progress from "../../component/Progress.svelte"
	import SwimmingBG from "../../component/SwimmingBG.svelte"
	import Paging from "../../component/Paging.svelte"
	let userSearch = "";
    let list = [];
    let isLoad=false;
	let showOptionals=false;
	let activeIndex=1;
	let showList=[];
	let showPreview=false;
	let progress="0 / 0"
	let size=[{name:"大",value:"large"},{name:"中",value:"medium"},{name:"小",value:"small"}];
	let locale=[{"name":"中文繁体","value":"zh-TW"},{"name":"英语","value":"en-US"}];
	// let locale=[{"name":"中国","value":"zh-CN"},{"name":"中国台湾","value":"zh-TW"},{"name":"美国","value":"en-US"},{"name":"葡萄牙","value":"pt-BR"},{"name":"西班牙","value":"es-ES"},{"name":"加泰罗尼亚语","value":"ca-ES"},{"name":"德国","value":"de-DE"},{"name":"意大利","value":"it-IT"},{"name":"法国","value":"fr-FR"},{"name":"瑞典","value":"sv-SE"},{"name":"波兰","value":"pl-PL"},{"name":"日本","value":"ja-JP"},{"name":"韩国","value":"ko-KR"},{"name":"泰国","value":"th-TH"},{"name":"荷兰","value":"nl-NL"},{"name":"匈牙利","value":"hu-HU"},{"name":"越南","value":"vi-VN"},{"name":"捷克","value":"cs-CZ"},{"name":"丹麦","value":"da-DK"},{"name":"芬兰","value":"fi-FI"},{"name":"乌克兰","value":"uk-UA"},{"name":"希腊","value":"el-GR"},{"name":"罗马尼亚","value":"ro-RO"},{"name":"挪威","value":"nb-NO"},{"name":"斯洛伐克","value":"sk-SK"},{name:"土耳其语","value":"tr-TR"},{name:"俄语","value":"ru-RU"}];
	let orientations=[{name:"横构图",value:"landscape"}, {name:"竖构图",value:"portrait"} , {name:"正方形",value:"square"}];
	let colors=[{"name":"红色","value":"red"},{"name":"橙色","value":"orange"},{"name":"黄色","value":"yellow"},{"name":"绿色","value":"green"},{"name":"青绿色","value":"turquoise"},{"name":"蓝色","value":"blue"},{"name":"紫色","value":"violet"},{"name":"粉色","value":"pink"},{"name":"棕色","value":"brown"},{"name":"黑色","value":"black"},{"name":"灰色","value":"gray"},{"name":"白色","value":"white"}];
	let radioComponent=[]
	let isNoData="someData";
	let searchConfig={};
	let getDataType="curated" // curated 精选 // search 搜索
	let searchDOM_bottom=0;
	let showPreviewIndex=0;
	let PreviewsComponent;
	try{
		window.$G.removeBackButton()
		window.$G.removeViewTop();
	}catch(e){}
    window.onload=function(){
		setSearchDOMTop();
    }
	function setSearchDOMTop(){
		let searchDOM=document.querySelector(".search")
		let rect =  searchDOM.getBoundingClientRect();
		searchDOM_bottom=rect.bottom
	}
	function imgLoading(info){
		progress=`${info.detail.index} / ${info.detail.total}`
	}
    function imgLoadComplete(){
			isLoad=false
			jQuery('body,html').animate({
				scrollTop:0,
			},0)
			progress=`0 / 0`;
    }
    window.onresize=function(){
      
    }
	getDataCuratedList(activeIndex);

	function back(){
		if(getDataType=="search"){
			selectCurated();
			return;
		}
		try{
			window.$G.exitWebApp();
		}catch(e){

		}
	}
	function paging(info){
		let index =  info.detail;
		if(isLoad){
			return;
		}
		isLoad=true;
		
		activeIndex=index;
		
		if(list[activeIndex]){
			showList=list[activeIndex-1];
			return 
		}
		if(getDataType=="search"){
			getDataSearchList();
		}else{
			getDataCuratedList(activeIndex);
		}
	}
	function getDataCuratedList(index){
		isLoad=true;
		progress="0 / 0"
		getDataCurated({
			page:index,
			per_page:40
		}).then((info)=>{
			let photos=info.data.photos
			setisNoData(photos.length)
			if(photos.length!=0){
				list.push(info.data.photos);
				list=list;
				showList=list[activeIndex-1]||[];
			}
			
		})
	}

	function previewImg(info){
		PreviewsComponent.ctrl(true)
		showPreviewIndex=info.detail.index;
	}
    
	function selectOpt(info,type){
		searchConfig[type]=info.detail.value;
	}
	function unselectOpt(info,type){
		delete searchConfig[type];
	}
	function userInput(e){
		if(userSearch.trim()==""){
			return;
		}
		getDataType="search"
		list=[];
		isLoad=true;
		activeIndex=1;
		radioComponent.forEach((item)=>{
			item.clear();
		})
		showOptionals=false
		searchConfig.query=userSearch||" "
		searchConfig.per_page=40
		searchConfig.locale="zh-CN"
		getDataSearchList();
	}
	function getDataSearchList(){
		searchConfig.page=activeIndex;
		getDataType=="search"
		progress="0 / 0"
		getDataSearch(searchConfig).then((info)=>{
			let photos=info.data.photos
			setisNoData(photos.length)
			if(photos.length!=0){
				list.push(photos);
				list=list;
				showList=list[activeIndex-1]||[];
			}
		})
	}
	function setisNoData(photosLen){
		if(photosLen==0){
			isLoad=false;
			showList=[];
			if(activeIndex==1){
				// 搜索不到内容
				isNoData="noSearchData"
			}else{
				// 没有更多
				isNoData="noMoreData"
			}
		}else{
			isNoData="someData"
		}
	}
	function selectCurated(){
		userSearch=""
		getDataType="curated"
		list=[];
		activeIndex=1;
		getDataCuratedList(1);
	}
</script>
<style>
	main{
	height: 100%;
	width: 100%;
}
.container{
	box-sizing: border-box;
	padding-top: constant(safe-area-inset-top);
  	padding-top: env(safe-area-inset-top);
	height: 100%;
	width: 100%;
	font-size: 1rem;
	
	
}
.optionals{
  /* position: absolute; */
  position: fixed;
  top: 0px;
  left: 1rem;
  right: 1rem;
  height: 100vh;
  transform-origin: 50% 100%;
  will-change: all;
  transition: all 1s ease;
  overflow: hidden;
  background: transparent;
  z-index: 4;
  /* margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top); */
}
.optionals_content{
  width: 100%;
  /* height: 33rem; */
  border-radius: 1rem;
  padding: 1rem 1rem;
  box-sizing: border-box;
  background: white;
  box-shadow: 0px 0px 10px #9f9f9f63;
  overflow: hidden;
  margin-top: 1rem;
}


.search{
    position: fixed;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    background: white;
    /* width: 90%; */
    height: 5.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0px 1rem;
    box-sizing: border-box;
    /* opacity: 0.3; */
    margin: 1rem 0px;
    border-radius: 0.5rem;
    left: 1rem;
    right: 1rem;
    z-index:4;
}

.back{
  font-size: 1rem;
  margin-right: 1rem;
  width: 4rem;
  height: 4rem;
  white-space: nowrap;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebebeb5c;
  color: #404040;
}
.search_btn{
  width: 100%;
  height: 5rem;
  margin-right: 0px;
  background: rgb(255, 255, 255);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  box-shadow: 0px 0px 10px #8080800f;
  margin-top: 0.5rem;
}
.search_btn.noCanSearch{
  background: rgb(255, 255, 255);
}
.noCanSearchText{
  font-size: 1.5rem;
  margin-left:1rem;
  color: rgb(255, 158, 158);
}
.content{
    height: 100%;
	width: 100%;
	min-height: 50vh;
	flex: 1;
	transition: opacity ease 0.5s;
}
.content.disScroll{
  /* overflow: hidden; */
  position: relative;
  z-index: -100;
}
.content.load{
	opacity: 0;
    /* visibility: hidden; */
}
.content.noload{
	opacity: 1;
    /* visibility:visible; */
}
.comparisonList{
	max-height: 50%;
	overflow:auto;
	/* border-bottom: 1px solid rgb(224, 224, 224); */
	
}
.comparisonList .ranking{
	background: rgb(255, 98, 50);
	color: white;
}
.searchInput{
  flex: 1;
  /* width: 70%; */
  height: 90%;
  border: none;
  border-radius: 1rem;
  text-align: center;
  /* margin-right: 1rem; */
  outline: none;
  font-size: 1.5rem;
  text-indent: -4rem;
  background: transparent;
}

:root {
  --borderColor: #ffffff;
  --borderColorDeep: #ffffff;
  --borderColorLight: #ffffff;
}
.curated{
  height: 15rem;
  align-items: center;
  justify-content: center;
  display: inline-block;
  width: 100%;
  /* margin-bottom: 1rem; */
  padding: 0px 10px;
  box-sizing: border-box;
  margin-top: 1rem;
}
.curated_card{
  width: 100%;
  height: 100%;
  display: inline-block;
  font-size: 3rem;
  /* background: linear-gradient(rgba(213, 213, 213, 0.584),rgba(99, 99, 99, 0.564)); */
  background: linear-gradient(to right, #dd5e89, #f7bb97);
  color: white;
  line-height: 3.6rem;
  letter-spacing:0.3rem;
  /* border: white solid 1rem; */
  border-radius: 0.5rem;
  box-sizing: border-box;
  text-shadow: #333 0px 4px 10px;
  overflow: hidden;
}
.curated_card_text{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 1;
  }

</style>